<template>
  <div class="grab">
    <div class="top">
      <p>
        <span class="tu">
          <img
            src="https://static.epetbar.com/static_wap/appmall/main/index_icon_berserk_mark_529.png?version=03"
            alt=""
          />
        </span>
        <span class="dian">
          <span class="shisi"> 14点场 </span>
          正在疯抢
        </span>
      </p>
    </div>
    <div class="now">
      <div class="some" v-for="product in fengqiang" :key="product.gid">
        <div class="top">
          <div class="economize">立省</div>
          <img
            src=""
            alt=""
          />
          <div class="price">85</div>
        </div>

        
        <div class="count-box">
          <div class="count-img">
            <div>
              <img :src="product.image.img_url" />
            </div>
          </div>

          <div class="count-text1">{{ product.subject }}</div>
          <div class="count-text2">{{ product.brandName }}</div>
          <div class="qian">
            <span class="befor"> ￥{{ product.sale_price }} </span>
            <span class="after" style="text-decoration: line-through">
              ￥{{ product.little_price }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    fengqiang: {
      type: Array,
      default: () => [],
    },
  },
};
</script>

<style lang="scss" scoped>
.grab {
  width: 360px;
  height: 250px;
  background-color: white;
  margin: 20px auto;
  border-radius: 10px 30px 10px 10px;
  .top {
    .tu {
      width: 70px;
      height: 16px;
      margin-left: 10px;
      img {
        width: 70px;
        height: 16px;
        vertical-align: middle;
      }
    }
    .dian {
      border-radius: 12px 0 12px 0;
      display: inline-block;
      width: 89px;
      height: 16px;
      font-size: 9px;
      background: rgb(239, 129, 102);
      margin-left: 5px;
      .shisi {
        display: inline-block;
        width: 40px;
        height: 12px;
        border-radius: 12px 0 12px 0;
        background: black;
        color: white;
        font-size: 9px;
        padding: 2px;
      }
    }
  }

  .now {
    width: 360px;
    height: 200px;
    background-color: palegoldenrod;
    display: flex;
    overflow: hidden;
    overflow-x: auto;
    .some {
      width: 86px;
      height: 199px;
      background-color: #ffe9e3;
      box-sizing: border-box;
      padding: 5px;

      .top {
        width: 71px;
        height: 20px;
        border: 1px solid #ef8166;
        border-radius: 4px;
        background: #fff;
        display: flex;
        .economize {
          color: #f6f302;
          background: -webkit-gradient(
            linear,
            left bottom,
            left top,
            from(#ef8166),
            to(#f54f42)
          );
          background: linear-gradient(0deg, #ef8166, #f54f42);
          word-break: keep-all;
          padding: 0 3px 0 0px;
          font-size: 12px;
        }
        img {
          width: 11px;
          height: 19px;
        }
        .price {
          color: #ef8166;
          word-break: keep-all;
          overflow: hidden;
          font-size: 12px;
          margin-left: 5px;
          height: 20px;
          line-height: 20px;
        }
      }
      .count-img {
        width: 71px;
        height: 71px;
        margin-top: 7px;
        img {
          width: 61px;
          height: 61px;
        }
      }
      .count-text1 {
        width: 59px;
        height: 16px;
        font-size: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .count-text2 {
        width: 59px;
        height: 16px;
        font-size: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .qian {
        width: 84px;
        height: 19px;
        display: flex;
        overflow: hidden;
        font-size: 12px;
        -webkit-transform-origin-x: 0;
        -webkit-transform: scale(0.84);
        font-weight: 700;
        color: white;
        background: linear-gradient(90deg, #f54f42, #ef8166);
        border-radius: 4px;
        span {
          margin-left: 2px;
        }
      }
    }
  }
}
</style>